<template>
  <div id="app" class="app-container">
    <!-- 布局容器 -->
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header class="app-header">
        <div class="header-left">
          <el-icon class="logo-icon"><Monitor /></el-icon>
          <h1 class="logo-text">Macho Inspector</h1>
        </div>

        <div class="header-center">
          <el-menu
            :default-active="$route.path"
            mode="horizontal"
            router
            class="nav-menu"
          >
            <el-menu-item index="/dashboard">
              <el-icon><Odometer /></el-icon>
              <span>仪表盘</span>
            </el-menu-item>
            <el-menu-item index="/modules">
              <el-icon><Grid /></el-icon>
              <span>模块列表</span>
            </el-menu-item>
            <el-menu-item index="/memory-analysis">
              <el-icon><Cpu /></el-icon>
              <span>内存分析</span>
            </el-menu-item>
            <el-menu-item index="/analysis">
              <el-icon><DataAnalysis /></el-icon>
              <span>数据分析</span>
            </el-menu-item>
          </el-menu>
        </div>

        <div class="header-right">
          <!-- 产品选择器 -->
          <ProductSelector />

          <!-- 主题切换 -->
          <el-button
            :icon="isDark ? Sunny : Moon"
            circle
            @click="toggleTheme"
            class="theme-btn"
          />
        </div>
      </el-header>

      <!-- 主要内容区 -->
      <el-main class="app-main">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Monitor, Odometer, Grid, DataAnalysis, Sunny, Moon, Cpu } from '@element-plus/icons-vue'
import ProductSelector from '@/components/ProductSelector.vue'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()
const isDark = ref(false)

const toggleTheme = () => {
  isDark.value = !isDark.value
  document.documentElement.classList.toggle('dark', isDark.value)
}

onMounted(() => {
  // 检查系统主题偏好
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
  isDark.value = prefersDark
  document.documentElement.classList.toggle('dark', prefersDark)
})
</script>

<style scoped lang="scss">
.app-container {
  height: 100vh;
  background-color: var(--el-bg-color);
}

.app-header {
  background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;

    .logo-icon {
      font-size: 28px;
    }

    .logo-text {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
    }
  }

  .header-center {
    flex: 1;
    display: flex;
    justify-content: center;

    .nav-menu {
      background: transparent;
      border: none;

      :deep(.el-menu-item) {
        color: rgba(255, 255, 255, 0.8);
        border-bottom: 2px solid transparent;
        background: transparent !important;

        &:hover {
          color: white !important;
          background: rgba(255, 255, 255, 0.1) !important;
          border-bottom-color: rgba(255, 255, 255, 0.5);
        }

        &.is-active {
          color: white !important;
          background: rgba(255, 255, 255, 0.15) !important;
          border-bottom-color: white !important;
        }

        // 确保图标和文字颜色正确
        .el-icon {
          color: inherit !important;
        }

        span {
          color: inherit !important;
        }
      }
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 16px;

    .theme-btn {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;

      &:hover {
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }
}

.app-main {
  padding: 20px;
  background-color: var(--el-bg-color-page);
  min-height: calc(100vh - 60px);
}

// 过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 暗色主题适配
:deep(.dark) {
  .app-header {
    background: linear-gradient(135deg, var(--el-color-primary-dark-2) 0%, var(--el-color-primary-dark-3) 100%);
  }
}
</style>